<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }" >
			<view class="nav-back" @click="goBack">←</view>
			<view class="nav-title">车辆维修</view>
			<view class="nav-actions">···</view>
		</view>

		<!-- 地图区域 -->
		<!-- <view class="map-container">
            <image src="/static/image/repair/map1.png" mode="widthFix" class="map-image"></image>
            <view class="nearby-shop" @click="goToNearbyShops">附近门店 →</view>
        </view> -->
		<uni-card class="custom-card" margin="20rpx" spacing="0">
			<view class="map">
				<map :longitude="longitude" :latitude="latitude"></map>
				<view class="nearby-shop" @click="goToNearbyShops">附近门店 →</view>
			</view>
		</uni-card>

		<!-- 门店信息 -->
		<view class="shop-info">
			<view class="shop-header">
				<view class="shop-name-main">车百事汽车生活馆</view>
				<view class="shop-distance">556m</view>
			</view>

			<view class="shop-content">
				<view>
					<view class="shop-rating">★★★★ 4分</view>

					<view class="shop-details">
						<text>营业时间：周一至周五 早上8:00-晚上22:00</text>
						<text>位置：山阳区人民路与解放路交叉口</text>
					</view>
				</view>

				<view class="shop-image">
					<image src="/static/image/repair/repair01.png" mode="aspectFill"></image>
				</view>
			</view>

			<view class="action-buttons">
				<view class="btn-contact" @click="showCallDialog">
					<image class="btn-icon" src="/static/image/carmaintenance/电话@3x.png" mode="aspectFit"></image>
					<text class="btn-text">联系门店</text>
				</view>
				<view class="btn-book" @click="goToBooking">
					<image class="btn-icon" src="/static/image/carmaintenance/预约@3x.png" mode="aspectFit"></image>
					<text class="btn-text">立即预定</text>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="bottom-bar">
			<view class="nav-buttons">
				<view class="nav-btn" @click="goToNearbyShops">附近门店</view>
				<view class="nav-btn">推荐服务</view>
				<view class="nav-btn" @click="goToRepairHistory">维修历史</view>
			</view>
		</view>

		<!-- 拨号确认弹窗 -->
		<uni-popup ref="callDialog" type="bottom">
			<view class="call-dialog">
				<view class="call-info">
					<view class="call-name">车百重汽车生活馆</view>
					<view class="call-phone">18642589456</view>
				</view>
				<view class="call-actions">
					<view class="call-btn copy" @click="copyPhone">复制</view>
					<view class="call-btn cancel" @click="closeCallDialog">取消拨号</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 响应式数据
	const shopPhone = ref('18642589456');
	const longitude = ref(116.397470);
	const latitude = ref(39.908823);
	const callDialog = ref(null);
	const statusBarHeight = ref(0); // 状态栏高度

	// 获取位置信息
	const getLocationInfo = () => {
		uni.getLocation({
			success: (res) => {
				console.log(res);
				latitude.value = res.latitude;
				longitude.value = res.longitude;
				console.log('赋值后的纬度：', latitude.value);
				console.log('赋值后的经度：', longitude.value);
			}
		});
	};

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};

	// 跳转到附近门店
	const goToNearbyShops = () => {
		uni.navigateTo({
			url: './nearbyShops/nearbyShops'
		});
	};

	// 显示拨号弹窗
	const showCallDialog = () => {
		callDialog.value.open();
	};

	// 关闭拨号弹窗
	const closeCallDialog = () => {
		callDialog.value.close();
	};

	// 复制电话号码
	const copyPhone = () => {
		uni.setClipboardData({
			data: shopPhone.value,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			}
		});
	};

	// 跳转到预订页面
	const goToBooking = () => {
		uni.navigateTo({
			url: './booking/booking'
		});
	};

	// 跳转到维修历史
	const goToRepairHistory = () => {
		uni.navigateTo({
			url: './repairHistory/repairHistory'
		});
	};

	// 生命周期钩子
	onLoad(() => {
		// 获取状态栏高度，使用推荐的wx.getWindowInfo API
		try {
			const windowInfo = uni.getWindowInfo();
			statusBarHeight.value = windowInfo.statusBarHeight;
		} catch (error) {
			console.error('获取窗口信息失败:', error);
			statusBarHeight.value = 0;
		}
		
		getLocationInfo();
	});
</script>

<style>
	/* 页面样式 */
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.nav-bar {
		height: 44px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #1E88E5;
		color: white;
		padding:0  16px;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-back {
		font-size: 20px;
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
	}

	.map-container {
		position: relative;
	}

	.map-image {
		width: 100%;
		height: 400rpx;
	}

	.nearby-shop {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #FF5722;
		color: white;
		padding: 8px 16px;
		border-radius: 20px;
		font-weight: bold;
	}

	.shop-info {
		background-color: white;
		padding: 16px;
		margin-bottom: 10px;
		position: relative;
	}

	.shop-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 8px;
	}

	.shop-name-main {
		font-size: 18px;
		font-weight: bold;
	}

	.shop-distance {
		color: #1E88E5;
		font-weight: bold;
	}

	.shop-rating {
		color: #FFC107;
		margin-bottom: 12px;
	}

	.shop-details {
		margin-bottom: 16px;
	}

	.shop-details text {
		display: block;
		margin-bottom: 4px;
		color: #666;
		font-size: 14px;
	}

	.shop-image image {
		width: 120px;
		height: 80px;
		border-radius: 8px;
		margin-left: 5px;
		margin-top: 6px;
	}
	.shop-content{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.action-buttons {
		display: flex;
		margin-top: 20px;
	}

	.btn-contact {
		flex: 1;
		background-color: #1E88E5;
		color: white;
		padding: 12px;
		text-align: center;
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		border-radius: 30px;
	}

	.btn-book {
		flex: 1;
		background-color: #FF7043;
		color: white;
		padding: 12px;
		text-align: center;
		margin-left: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		border-radius: 30px;
	}

	.btn-icon {
		margin-right: 5px;
		font-size: 18px;
		width: 36rpx;
		height: 36rpx;
	}

	.btn-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}

	/* 底部导航栏样式 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background-color: white;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.nav-buttons {
		display: flex;
		height: 100%;
	}

	.nav-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #666;
		position: relative;
		padding: 0 5px;
	}

	.nav-btn.active {
		color: #1E88E5;
		font-weight: bold;
	}

	.nav-btn.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 25%;
		width: 50%;
		height: 3px;
		background-color: #1E88E5;
		border-radius: 3px;
	}

	/* 为底部导航栏留出空间 */
	.container {
		padding-bottom: 60px;
	}

	/* 拨号弹窗样式 */
	.uni-popup {
		z-index: 101 !important;
	}

	.call-dialog {
		background-color: white;
		border-radius: 16px 16px 0 0;
		padding: 20px;
		/* margin-bottom: 60px; */
		/* 为底部导航栏留出空间 */
	}

	.call-info {
		text-align: center;
		margin-bottom: 30px;
	}

	.call-name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.call-phone {
		font-size: 24px;
		color: #333;
	}

	.call-actions {
		display: flex;
		flex-direction: column;
	}

	.call-btn {
		padding: 15px;
		text-align: center;
		font-size: 16px;
		margin-bottom: 10px;
		border-radius: 8px;
		border: 1px solid #e0e0e0;
	}

	.call-btn.copy {
		background-color: #f5f5f5;
		color: #333;
	}

	.call-btn.cancel {
		background-color: #1E88E5;
		color: white;
		border: none;
	}

	map {
		width: 100%;
		height: 450px;
	}

</style>